<template>
    <div v-loading="loading">
        <div class="container user-basic-box e-m-h-auto e-m-b-15">
            <el-page-header @back="goBack" content="用户详情"></el-page-header>
            <div class="user-face">
                <div class="avatar">
                    <el-avatar icon="el-icon-user-solid" :size="100"></el-avatar>
                    <i class="iconfont icon-nan male" v-if="details.sex == '先生'"></i>
                    <i class="iconfont icon-nv female" v-else></i>
                </div>
                <div class="name">{{ details.name }}</div>
            </div>
            <div class="basic flex">
                <div class="item"><i class="el-icon-document"></i><span>用户编号：{{ details.ysid }}</span></div>
                <div class="item"><i class="el-icon-mobile-phone"></i><span>手机号码：{{ details.mobile }}</span></div>
                <!-- <div class="item"><i class="el-icon-place"></i><span>登录IP：{{ details.lastipaddress }}</span></div> -->
                <div class="item"><i class="el-icon-alarm-clock"></i><span>最后登录时间：{{ details.lastlogindatetime }}</span></div>
            </div>
            <div class="statistics-content e-m-t-45">
                <div class="item e-flex-1">
                    <label>订单数</label>
                    <div><span class="num">{{ details.ordertotal }}</span><small>单</small></div>
                </div>
                <div class="item e-flex-1">
                    <label>钱包余额</label>
                    <div><span class="num">{{ details.balancetotal }}</span><small>元</small></div>
                </div>
                <div class="item e-flex-1">
                    <label>剩余积分</label>
                    <div><span class="num">{{ details.integraltotal }}</span><small>分</small></div>
                </div>
            </div>
        </div>
        <div class="container e-m-h-auto e-m-b-15">
            <h4>账户信息</h4>
            <!-- <el-page-header @back="goBack" content="用户详情"></el-page-header> -->
            <!-- <el-form label-width="160px">
                <h4>用户信息</h4>
                <div class="flex">
                    <div class="e-flex-1">
                        <el-form-item label="联系人:">
                            <span>{{ details.name }}</span>
                        </el-form-item>
                    </div>
                    <div class="e-flex-1">
                        <el-form-item label="性别:">
                            <span class="male" v-if="details.sex == '先生'">男</span>
                            <span class="female" v-else>女</span>
                        </el-form-item>
                    </div>
                    <div class="e-flex-1">
                        <el-form-item label="电话:">
                            <span>{{ details.mobile }}</span>
                        </el-form-item>
                    </div>
                    <div class="e-flex-1">
                        <el-form-item label="微信绑定">
                            <span class="color-success" v-if="details.openid">已绑定</span>
                            <span class="color-danger" v-else>未绑定</span>
                        </el-form-item>
                    </div>
                </div>
                <div class="flex">
                    <div class="e-flex-1">
                        <el-form-item label="用户编号:">
                            <span>{{ details.ysid }}</span>
                        </el-form-item>
                    </div>
                </div>
            </el-form> -->
            <el-table :data="userAccountInfo" style="width: 100%">
                <el-table-column prop="type" label="账户类型">
                    <template slot-scope="scope">
                        <div v-if="scope.row.type=='enterprise'">客户组</div>
                        <div v-else>个人</div>
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="账户名称"></el-table-column>
                <el-table-column prop="ordercount" label="订单数"></el-table-column>
                <el-table-column prop="balance" label="余额">
                </el-table-column>
                <el-table-column prop="integral" label="积分">
                </el-table-column>
                <el-table-column label="操作" fixed="right" width="200">
                    <template slot-scope="scope">
                        <el-button type="text" size="small" v-if="scope.row.type=='enterprise'" @click="goEnterpriseView(scope.row.id)">查看客户组</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="container e-m-h-auto">
            <h4>用户地址</h4>
            <el-table :data="addressList" style="width: 100%">
                <el-table-column fixed prop="name" label="联系人" width="180">
                </el-table-column>
                <el-table-column prop="citynames" label="所属地区">
                </el-table-column>
                <el-table-column prop="address" label="地址">
                </el-table-column>
                <el-table-column prop="mobile" label="手机号码" width="180">
                </el-table-column>
                <!-- <el-table-column label="操作" fixed="right" width="200">
                    <template slot-scope="scope">
                        <el-button type="text" size="small">查看</el-button>
                    </template>
                </el-table-column> -->
            </el-table>
        </div>
        <!-- <div class="container e-m-h-auto e-m-t-15">
            <div class="flex" style="justify-content: space-between;align-items: center;">
                <h4>账单查询</h4>
            </div>
            <el-table :data="billList" style="width: 100%">
                <el-table-column fixed prop="type" label="类型" width="80">
                </el-table-column>
                <el-table-column fixed prop="number" label="编号" width="180">
                </el-table-column>
                <el-table-column prop="amount" label="金额/积分变动">
                    <template slot-scope="scope">
						<span v-if="scope.row.type == '回收入账' || scope.row.type == '送店回收' || scope.row.type == '提现退回'" class="color-success">+{{scope.row.amount}}</span>
						<span v-else-if="scope.row.type == '积分消耗'" class="color-danger">{{scope.row.integral}}<span>分</span></span>
						<span v-else class="color-danger">{{scope.row.amount}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="createdate" label="创建时间">
                </el-table-column>
            </el-table>
        </div> -->
        <!-- <div class="container e-m-h-auto">
            <h4>绑定客户组</h4>
            <el-table :data="details.bindinfo.enterpriselist" style="width: 100%">
                <el-table-column fixed prop="name" label="客户组名称">
                </el-table-column>
                <el-table-column prop="department" label="客户组部门" width="180">
                </el-table-column>
                <el-table-column prop="type" label="类型" width="180">
                </el-table-column>
                <el-table-column prop="financemode" label="管理类型" width="180">
                </el-table-column>
                <el-table-column prop="balance" label="余额" width="180">
                </el-table-column>
                <el-table-column prop="integral" label="积分" width="180">
                </el-table-column>
                <el-table-column label="操作" fixed="right" width="200">
                    <template slot-scope="scope">
                        <el-button type="text" size="small" @click="goEnterpriseView(scope.row.id)">查看</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div> -->
        <!-- <div class="container e-m-h-auto e-m-t-15">
            <h4>各品类回收汇总</h4>
            <el-table :data="orderRecord.orderdetails" style="width: 100%">
                <el-table-column fixed prop="typenames" label="可回收物" width="180">
                </el-table-column>
                <el-table-column prop="weight" label="数量（KG/件）">
                        <template slot-scope="scope">
                            <span>{{ scope.row.weight }}{{ scope.row.isweighing?'KG':'件' }}</span>
                        </template>
                    </el-table-column>
                <el-table-column prop="amount" label="总收益（元）" width="180">
                </el-table-column>
            </el-table>
        </div> -->
        <div class="container e-m-h-auto e-m-t-15">
            <div class="flex" style="justify-content: space-between;align-items: center;">
                <h4>最新订单</h4>
                <div @click="golist" class="zi">更多</div>
            </div>
            <orderUserList :userId="id" :insidePage="true"></orderUserList>
        </div>
        
        <div class="e-m-t-15">
            <el-button @click="goBack">返回</el-button>
        </div>
    </div>
</template>

<script>
export default {
    layout: 'admin',
    head() {
        return {
            title: '用户详情' 
        }
    },
    props:{
      id:{
        type:Number,
        default:0
      }  
    },
    data() {
        let password = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入密码'));
            } else {
                if (this.form.confirpwd !== '') {
                    this.$refs.form.validateField('confirpwd');
                }
                callback();
            }
        };
        let confirpwd = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请再次输入密码'));
            } else if (value !== this.form.password) {
                callback(new Error('两次输入密码不一致!'));
            } else {
                callback();
            }
        };
        return {
            dialogVisible2: false,
            userForm: {
                flow: {}
            },
            details: { //用户信息
                bindinfo:{
                    enterpriselist: []
                }
            },
            userAccountInfo: [],
            orderRecord: {
                balance: 0,
                carbon: 0,
                cashout: 0,
                cashrecord: [],
                income: 0,
                ordercount: 0,
                orderdetails: [],
                orderrecord: [],
                regdays: 0,
                weight: 0,
            },
            page: 1,
            pageSize: 10,
            total: 0,
            loading: false,
            dialogVisible: false,
            form: {
                password: '',
                confirmpassword: ''
            },
            rules: {
                password: [{
                    validator: password,
                    trigger: 'blur'
                },
                {
                    min: 6,
                    max: 16,
                    message: '长度在 6 到 16 个字符',
                    trigger: 'blur'
                }
                ],
                confirmpassword: [{
                    validator: confirpwd,
                    trigger: 'blur'
                },
                {
                    min: 6,
                    max: 16,
                    message: '长度在 6 到 16 个字符',
                    trigger: 'blur'
                }
                ]
            },
            tableData: [
                
            ],
            addressList: [],
            // 推广人绑定
            promotion: [],
            dialogVisible1: false,
            param: {
                salesTel: null, //用于搜索业务员手机号
                name: '', //显示检测出来的业务员名称
                btnDisabled: true //控制确定按钮是否可用
            },
            promotionForm: {
                "promotionusertype": 6,
                "promotionuserid": 0,
                "id": 0
            },
            promotionusertypeOptions: [
                {
                    value: 6,
                    label: '业务员'
                },
                {
                    value: 3,
                    label: '小哥'
                },
                {
                    value: 1,
                    label: '用户'
                },
                {
                    value: 2,
                    label: '客户组'
                }
            ],
            listIntegral: {
                list: [],
                pageIndex: 1,
                pageSize: 10,
                total: 0
            },
            // 用户账单
            billList: []
        }
    },
    watch:{
        id(val) {
            this.getDetails(this.id)
            this.getAddressList()
            // this.getOrderRecord(this.id)
            // this.getListIntegral()
        },  
    },
    mounted() {
        this.getDetails(this.id)
        this.getAddressList()
        // this.getOrderRecord(this.id)
        // this.getListIntegral()
        // this.getWithdrawApply()
    },
    methods: {
        // 查看客户组详情
        goEnterpriseView(id){
            window.open('/Enterprise/views?id='+id)
        },
        // 提现申请列表
        getWithdrawApply(){
            this.$axios.post('/WithdrawApply/List', {
                pageIndex: 1,
                pageSize: 10,
                userType: '用户', //用户类型
                relationId: this.id,
                state: [],
                // timeType: 9,
                // startDate: this.start,
                // endDate: this.end
            }).then((res) => {
                console.log('提现申请列表',res)
                this.orderRecord.cashrecord = res.rows
            })
        },
        // unbindingFace(){ //人脸认证解绑
        //     this.$confirm('确定要解绑该用户的人脸认证吗？', '提示', {
        //         confirmButtonText: '确定',
        //         cancelButtonText: '取消',
        //         type: 'warning'
        //     }).then(() => {
        //         this.$axios.get('/Admin/User/Account/UnbindingFace?id='+this.id).then((res)=>{
        //             this.$message.success(res.msg);
        //             this.getDetails(this.id)
        //         })
        //     })
        // },
        // checkPromoter() { //检测推广人手机号是否存在
        //     if(!this.param.salesTel){
        //         this.$message.error('请输入手机号码');
        //         return
        //     }
        //     this.$axios.post('/Promoter/Check', {
        //         "promotionUserType": this.promotionForm.promotionusertype,
        //         "mobile": this.param.salesTel
        //     }).then((res) => {
        //         this.promotionForm.promotionuserid = res.id
        //         this.param.name = res.name
        //         this.param.btnDisabled = false
        //     })
        // },
        // bindingPromoter(){ //提交绑定推广人
        //     this.promotionForm.id = this.id
        //     this.$axios.post('/Promoter/Bind',this.promotionForm).then((res)=>{
        //         this.$message.success(res.msg);
        //         this.dialogVisible1 = false
        //         this.getDetails(this.id)
        //     })
        // },
        // unbindingPromotion(){ //解绑推广人
        //     this.$confirm('解绑推广人后，将不再将此用户的回收订单记录到推广人账上', '提示', {
        //         confirmButtonText: '确定',
        //         cancelButtonText: '取消',
        //         type: 'warning'
        //     }).then(() => {
        //         this.$axios.post('/Promoter/UnBind?id='+this.id).then((res) => {
        //             this.$message.success(res.msg);
        //             this.getDetails(this.id)
        //         })
        //     })
        // },
        // open(id) {
        //     this.$confirm('解绑后,此IC卡将无法关联此账号, 是否继续?', '解绑IC卡号', {
        //         confirmButtonText: '确定',
        //         cancelButtonText: '取消',
        //         type: 'warning'
        //     }).then(() => {
        //         this.$axios.post(`/Admin/User/Account/UnbindingICCode?Id=${this.id}`).then((res) => {
        //             // console.log(res)
        //             // this.userForm = res
        //             // this.dialogVisible2 = true
        //             console.log(res)
        //             this.$message({
        //                 type: 'success',
        //                 message: '解绑成功!'
        //             });
        //         })


        //     }).catch(() => {
        //         this.$message({
        //             type: 'info',
        //             message: '已取消删除'
        //         });
        //     });
        // },
        // views(id) {
        //     this.$axios.post('/Admin/User/Apply/Details?id=' + id).then((res) => {
        //         console.log(res)
        //         this.userForm = res
        //         this.dialogVisible2 = true
        //     })
        // },
        getListIntegral(){
            //用户积分列表 
            this.$axios.post('/Bill/List',{
                // type: 0,
                userId: this.id,
                pageIndex: this.listIntegral.pageIndex,
                pageSize: this.listIntegral.pageSize,
            }).then((res) => {
                console.log(res)
                this.listIntegral.list = res.rows
                this.listIntegral.total = res.total
            })
        },
        go(row) {
            console.log(row)
            if(row.number.indexOf('FIT') == -1){
                this.$router.push("/order/user/Views?id=" + row.id)
            }else{
                this.$router.push("/order/brother/fitViews?id=" + row.id)
            }
        },
        golist() {
            this.$router.push("/order/user/list?id=" + this.id)
        },
        getOrderRecord(id) {
            return this.$axios.get('/Admin/User/Account/GetOrderRecord?id=' + id).then((res) => {
                console.log(res)
                this.orderRecord = res
            })
        },
        goBack() {
            this.$emit('goBack')
        },
        pageChange(e) { // 页码切换事件
            this.page = e;
        },
        handleSizeChange(val) {
            this.page = 1;
            this.pageSize = val;
        },
        getDetails(id) {
            return this.$axios.get('/User/Detail?userId=' + id).then((res) => {
                console.log(res)
                this.details = res

                this.userAccountInfo = []
                this.userAccountInfo.push({
                    name: this.details.name,
                    ordercount: this.details.ordercount,
                    balance: this.details.balance,
                    integral: this.details.integral,
                    type: 'user'
                })
                this.details.bindinfo.enterpriselist.forEach((item)=>{
                    this.userAccountInfo.push({
                        id: item.id,
                        name: `[${item.type}]${item.name}`,
                        ordercount: item.ordercount,
                        balance: item.balance,
                        integral: item.integral,
                        type: 'enterprise'
                    })
                })
                // if(res.promotion){
                //     this.promotion = [res.promotion]
                // }else{
                //     this.promotion = []
                // }
            })
        },
        getAddressList() {
            this.$axios.get('/User/Address/List', {
                params:{
                    id: this.id
                }
            }).then((res) => {
                console.log(res)
                this.addressList = res
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.zi1 {
    margin-left: 15px;
    display: inline-block;
    color: #02d5d6;
    cursor: pointer;
}

.zi {
    font-size: 14px;
    color: #9fa3b0;
    cursor: pointer;
}

.user-basic-box {
    // background: url(/images/bg.jpg);
    background-size: 100%;

    .user-face {
        text-align: center;
        width: 100px;
        margin: 0 auto;
        position: relative;

        .avatar {
            .iconfont {
                font-size: 14px;
                position: absolute;
                right: 3px;
                top: 6px;
                background-color: #fff;
                height: 22px;
                width: 22px;
                line-height: 24px;
                border-radius: 100%;
            }

            .male {
                background: var(--blue);
                color: #fff;
            }

            .female {
                background: var(--pink);
                color: #fff;
            }
        }
    }

    .basic {
        font-size: 14px;
        align-items: center;
        justify-content: center;
        margin-top: 15px;

        .item {
            margin: 0 10px;
        }
    }
}


.statistics-content {
    display: flex;
    text-align: center;

    .item {
        &+.item {
            border-left: 1px solid var(--light);
            padding-left: 30px;
        }

        .icon {
            width: 44px;
            height: 44px;
            border-radius: 50%;
            border: 1px solid var(--light);
            background-color: #f2f3f5;
            padding: 5px;
            margin: 0 20px 0 0;
            box-shadow: 3px 2px 11px 0 rgb(70 70 70 / 22%);
        }

        label {
            color: var(--grey);
            font-size: 12px;
            margin-bottom: 5px;
            display: block;
        }

        .num {
            font-size: 30px;
        }
    }
}
</style>
